﻿@{
    ViewBag.Title = "ImageUpload4";
}

<style>
    #divFileArea { border: 10px dashed #ccc; width: 150px; height: 150px; margin: 20px auto;}
    #divFileArea.hover { border: 10px dashed #333; }
    .droppedImage { width: 100px; border-style:solid;border-color: gray;padding: 5px;margin: 5px; }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#divFileArea").on("dragover", function (ev) {
            ev.preventDefault();
        }).on("drop", function (ev) {
            ev.preventDefault();
            var files = ev.originalEvent.dataTransfer.files;
            
            $.each(files, function (index, file) {
                if ($(".droppedImage").length >= 5) {
                    $("#ulDragResult").append("이미지는 최대 5개까지 등록 가능합니다.<br />");
                    return true;
                }
                if (file.type.indexOf("image") == -1) {
                    $("#ulDragResult").append("이미지 파일만 업로드 가능합니다.<br />");
                    return true;
                }
                if (file.size > 748576) {
                    $("#ulDragResult").append(file.name + "파일의 용량이 커서 업로드가 제한되었습니다.<br />");
                    return true;
                }
                if ($(".droppedImage").filter(function(el) { return $(this).attr("data-filename") == file.name; }).length > 0) {
                    $("#ulDragResult").append(file.name + "과 같은 파일명이 존재합니다. 중복된 파일을 올릴 수 없습니다.<br />");
                    return true;
                }

                var img = $("<img />").addClass("droppedImage").attr("data-filename", file.name);
                $("#divImagesContainer").append(img);
                img.file = file;
                var reader = new FileReader();
                reader.onload = function () {
                    img.attr("src", reader.result);
                };
                reader.readAsDataURL(file);
            });
        });

        $("#btnUpload").on("click", function() {
            var imagesJson = $(".droppedImage").map(function() {
                var $this = $(this);
                return {
                    image: $this.attr("src"),
                    filename: $this.attr("data-filename")
                };
            }).toArray();



            //return alert(JSON.stringify({ images: imagesJson }).length);

            $.ajax({                
                url: "/Test/ImageUpload4",
                type: 'POST',
                async:true,
                data: JSON.stringify({ images: imagesJson }),
                contentType: 'application/json',
                success: function (result) {
                    alert('success');
                },
                beforeSend: function () {
                    
                },
                xhr:function() {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener("progress", function() { }, false);
                    } else {
                        console.log("Upload progress is not supported.");
                    }
                    return myXhr;
                }
            });
        });


    });
</script>

<h2>ImageUpload4</h2>
<p> ImageUpload4를 기반으로 <br />1. Client 파일 유효성 체크(File Size, File 중복, ),<br /> 2. 서버에서 권한처리<br />3. Progress 처리 </p>

<div id="divFileArea"></div>
<p id="status">File API & FileReader API not supported</p><br />
<a href="#" id="btnUpload" onclick="return false;" >업로드</a><br />
<div id="divImagesContainer"></div>
<span id="ulDragResult"></span>

<progress value="22" max="100"></progress>